export const info = {
  author: [
    {github: 'wooorm', name: 'Titus Wormer'}
  ],
  modified: new Date('2025-01-27'),
  published: new Date('2021-10-06')
}
export const navSortSelf = 1

# GitHub flavored markdown (GFM)

This guide explores how to support GFM features such as autolink literals,
footnotes, strikethrough, tables, and task lists. {/* more */}
MDX supports standard markdown syntax ([CommonMark][]).
That means [GitHub flavored markdown (GFM)][gfm] extensions are not supported by
default.
They can be enabled by using a remark plugin: [`remark-gfm`][remark-gfm].
That plugin, like all remark plugins, can be passed in [`remarkPlugins` in
`ProcessorOptions`][processor-options].
More info on plugins is available in [§ Extending MDX][extend]

Say we have an MDX file like this:

```mdx path="example.mdx"
# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done
```

The above MDX with GFM can be transformed with the following module:

```js twoslash path="example.js"
// @filename: example.js
/// <reference types="node" />
// ---cut---
import fs from 'node:fs/promises'
import {compile} from '@mdx-js/mdx'
import remarkGfm from 'remark-gfm'

console.log(
  String(
    await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]})
  )
)
```

<details>
  <summary>Expand equivalent JSX</summary>

  ```jsx path="output.jsx"
  <>
    <h1>GFM</h1>
    <h2>Autolink literals</h2>
    <p>
      <a href="http://www.example.com">www.example.com</a>,{' '}
      <a href="https://example.com">https://example.com</a>, and{' '}
      <a href="mailto:contact@example.com">contact@example.com</a>.
    </p>
    <h2>Footnote</h2>
    <p>
      A note
      <sup>
        <a
          href="#user-content-fn-1"
          id="user-content-fnref-1"
          data-footnote-ref="true"
          aria-describedby="footnote-label"
        >
          1
        </a>
      </sup>
    </p>
    <h2>Strikethrough</h2>
    <p>
      <del>one</del> or <del>two</del> tildes.
    </p>
    <h2>Table</h2>
    <table>
      <thead>
        <tr>
          <th>a</th>
          <th style={{textAlign: 'left'}}>b</th>
          <th style={{textAlign: 'right'}}>c</th>
          <th style={{textAlign: 'center'}}>d</th>
        </tr>
      </thead>
    </table>
    <h2>Tasklist</h2>
    <ul className="contains-task-list">
      <li className="task-list-item">
        <input type="checkbox" disabled /> to do
      </li>
      <li className="task-list-item">
        <input type="checkbox" disabled checked />
        done
      </li>
    </ul>
    <section data-footnotes="true" className="footnotes">
      <h2 className="sr-only" id="footnote-label">
        Footnotes
      </h2>
      <ol>
        <li id="user-content-fn-1">
          <p>
            Big note.{' '}
            <a
              href="#user-content-fnref-1"
              data-footnote-backref=""
              aria-label="Back to reference 1"
              className="data-footnote-backref"
            >
              ↩
            </a>
          </p>
        </li>
      </ol>
    </section>
  </>
  ```
</details>

[commonmark]: https://spec.commonmark.org/current/

[extend]: /docs/extending-mdx/

[gfm]: https://github.github.com/gfm/

[processor-options]: /packages/mdx/#processoroptions

[remark-gfm]: https://github.com/remarkjs/remark-gfm
